<template>

	<view class="content">
		<swiper class="swiper-box" :autoplay="autoplay" :interval="interval" circular="true" :duration="duration">
			<swiper-item v-for="(item, index) in info" :key="index">
				<view :class="item.colorClass" class="swiper-item">
					<image class="image" :src="item.url" mode="aspectFill" />
				</view>
			</swiper-item>
		</swiper>
		<view class="notice">
			<uni-notice-bar show-icon scrollable :speed="speed"
				:text="notice.content + '   ————    ' + notice.author" />
		</view>
		<view class="header-item">
			<uni-list>
				<uni-list-item link="navigateTo" to="../class/class" showArrow title="班级管理" />
			</uni-list>
		</view>

		<view class="item">
			<uni-list>
				<uni-list-item title="待办事项" showArrow thumb="/static/闹钟.png" thumb-size="lg" rightText="2条" />
			</uni-list>
		</view>

		<view class="body">
			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
				activeColor="#d91539"></uni-segmented-control>
			<view class="content">

				<view v-show="current===2">
					<!-- 列表为空时 -->
					<view v-if="work.length === 0" class="listNone">
						<image src="../../static/空白页面插图.png" mode=""></image>
						<view class="goIn">暂无数据</view>
					</view>
					<view class="work" v-else>
						<uni-card v-for="workItem in work" :key="workItem.id" :title="workItem.homeworkTaskName"
							:sub-title="'开始时间' + workItem.startTime" :thumbnail="workItem.path"
							:extra="workItem.state === 0 ? '已结束' : '进行中'">
							<view class="" :id="workItem.id" @click="jumpHomeworkDetail">
								作业详情
							</view>
						</uni-card>
					</view>
				</view>

				<view v-show="current === 1">
					<view v-if="report.length === 0" class="listNone">
						<image src="../../static/空白页面插图.png" mode=""></image>
						<view class="goIn">暂无数据</view>
					</view>
					<view class="report" v-else>
						<uni-card v-for="reportItem in report" :key="reportItem.id" :title="reportItem.bname"
							:sub-title="reportItem.create_time" :thumbnail="reportItem.path"
							:extra="reportItem.state !== 'action' ? '进行中' : '已结束'">
							<view class="noticeContent" :style="{height : isActiveId === reportItem.id ? '' : size + 'px',
								}" @click="zhankai(reportItem.id)">
								通知：{{reportItem.content}}
							</view>
						</uni-card>
					</view>
				</view>

				<view v-show="current===0">
					<!-- 列表为空时 -->
					<view v-if="sign.length === 0" class="listNone">
						<image src="../../static/空白页面插图.png" mode=""></image>
						<view class="goIn">暂无数据</view>
					</view>
					<view class="sign">
						<uni-card v-for="signItem in sign" :key="signItem.id" :title="signItem.className"
							:sub-title="'签到时间' + signItem.create_time" :thumbnail="signItem.path"
							:extra="signItem.sign + '/' + signItem.count + '人'">
							<view class="" :id="signItem.id" @click="jumpHomesignDetail">
								打卡详情
							</view>
						</uni-card>
					</view>
				</view>



			</view>
		</view>

	</view>
</template>

<script>
	import server from "@/util/http.js"
	export default {
		data() {
			return {
				size: 37,
				isActiveId: '',
				items: ['打卡', '通知', '作业'],
				work: [],
				current: 0,
				notice: {
					author: "莎士比亚",
					content: "正直的人必须和正直的人为伍，因为谁是那样刚强，能够不受诱惑呢"
				},
				speed: 50,
				indicatorDots: true,
				autoplay: true,
				interval: 2000, //切换的间隔时间
				duration: 500, //滑动动画时长
				info: [{
						url: 'https://iflyssedata.oss-cn-shanghai.aliyuncs.com/images/20220504111924.png',
					},
					{
						url: 'https://iflyssedata.oss-cn-shanghai.aliyuncs.com/images/20220402034252.png',
					},
					{
						url: 'https://iflyssedata.oss-cn-shanghai.aliyuncs.com/images/20220503032441.png',
					}
				],
				tid: '',
				report: []
			}

		},
		onLoad() {
			this.requestWork();
			this.requestReport();
		},
		onPullDownRefresh() {
			this.requestWork();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 2000);
		},
		computed: {
			sign() {
				return this.$store.state.sign
			}
		},
		methods: {
			zhankai(e) {
				this.isActiveId = e;
			},
			//点击 进入 作业详情
			jumpHomeworkDetail(e) {
				uni.navigateTo({
					url: '../homeworkDetail/homeworkDetail?id=' + e.currentTarget.id
				})
			},
			//点击 进入 详情界面
			jumpHomesignDetail() {
				uni.navigateTo({
					url: '../signDetail/signDetail'
				})
			},
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			//获取通知列表
			requestReport() {
				server({
					url: 'http://127.0.0.1:4523/mock/906666/report',
					method: 'get',
					success: res => {
						let data = res.data;
						let m = data.map(value => {
							value.path = '/static/通知.png';
							return value
						})
						this.report = m;
					},
					fail: e => {
						console.log(e);
					}
				})
			},
			//获取作业列表
			requestWork() {
				uni.getStorage({
					key: 'teacher',
					success: (res) => {
						this.tid = res.data.id
					}
				})
				server({
					url: 'http://101.43.227.220:3003/homeworktask/selectByTid?tid=' + Number(this.tid),
					method: 'post',
					success: res => {
						let items = res.data;
						let m = items.map(value => {
							//现在时间
							let now = new Date().getTime();
							//结束时间
							let stopTime = new Date(value.stopTime).getTime();
							if (now > stopTime) {
								//已完成
								value.state = 0
							} else {
								//进行中
								value.state = 1
							};
							value.path = '/static/作业.png';
							return value
						});
						this.work = m;
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		margin-bottom: 70px;
	}

	.noticeContent {
		transition: height 1s;
	}

	.header-item {
		margin-top: 0px;
	}

	.uni-list-item {
		height: 100rpx;

	}

	.notice {
		position: absolute;
		width: 100%;
		top: 210px;
		transform: translateY(-100%);
		z-index: 10;
		opacity: 0.8;
	}

	>>>.uni-list-item__content-title {
		font-size: 34rpx;
	}

	.item {
		margin-top: 20rpx;
	}

	>>>.uni-list-item__extra-text {
		color: red;
		font-size: 30rpx;
	}

	.body {
		margin-top: 30rpx;
	}

	>>>.uni-card .uni-card__header .uni-card__header-extra .uni-card__header-extra-text {
		font-size: 28rpx;
		color: black;
	}

	>>>.uni-list--lg {
		height: 68rpx;
		width: 68rpx;
	}

	>>>.segmented-control .segmented-control__text {
		font-weight: 600;
		font-size: 32rpx;
	}

	.listNone {
		text-align: center;
		margin-top: 70px;
	}

	.listNone image {
		width: 200rpx;
		height: 200rpx;
	}

	.goIn {
		margin-top: 20rpx;
		font-size: 34rpx;
		font-weight: 500;
		font-family: 'Courier New', Courier, monospace;
	}

	.swiper-box {
		width: 100%;
		height: 200px;
	}

	.image {
		width: 100%;
		height: 200px;
	}
</style>
